<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<title>登录</title>
		<link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
		<style>
			.mui-bar-nav~.mui-content {
				padding: 0.4rem 0.54rem;
			}
			
			.mui-content,
			.mui-input-group,
			.mui-input-group .mui-input-row:after {
				background: none;
			}
			
			.mui-input-group .mui-input-row {
				background: #fff;
				border: 0.01rem solid #ddd;
				color: #999;
				height: 0.88rem;
				margin-bottom: 0.14rem;
				border-radius: 3px;
				padding: 0.15rem 0;
			}
			
			.mui-input-row label {
				width: 26%;
				line-height: 0.55rem;
				height: 0.55rem;
				padding: 0px;
				text-align: center;
				border-right: 1px solid #ddd;
			}
			
			.mui-input-row label~input {
				width: 74%;
				line-height: 0.55rem;
				height: 0.55rem;
				padding: 0 0.15rem;
			}
			
			input[type=text],
			input[type=password] {
				height: 0.55rem;
			}
			
			.mui-input-row .mui-input-password~.mui-icon-eye {
				top: 0.2rem;
				height: 0.55rem;
			}
			
			#forgetPassword {
				float: right;
				margin-top: 0.31rem;
				transform: scale(1, 1);
				-webkit-transform: scale(1, 1);
				-moz-transform: scale(1, 1);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">忘记密码</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input type="text" class="mui-input-clear" id="account" placeholder="用户名">
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<input type="text" class="mui-input-clear" id="mobile" placeholder="手机号">
				</div>
				<div style="margin-bottom:0.29rem;overflow: hidden;">
					<div class="mui-input-row" style="float:left;width:61.40625%;margin-bottom:0px;">
						<label style="width:43%">验证码</label>
						<input type="text" class="mui-input-clear" id="vcode" placeholder="验证码" style="width:57%">
					</div>
					<div class="btn" style="float:right;width:35%;margin-top: 0.01rem;" id="sendMsg">获取验证码</div>

				</div>
				<div class="mui-input-row">
					<label>新密码</label>
					<input type="password" class="mui-input-password" id="newpassword" placeholder="新密码">
				</div>
				<div class="mui-input-row">
					<label>确认密码</label>
					<input type="password" class="mui-input-password" id="confirmpassword" placeholder="确认密码">
				</div>

				<div id="message" style="color:#f00" class="none transition">
					<label>用户名或者密码错误</label>
				</div>

				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary mui-btn-full" id="register" style="height:44px;background:#f1c40f;color:#fff;border-color:#f1c40f">确认</button>
				</div>

			</form>
		</div>

	</body>
	<script src="js/resize.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript" src="js/update.js"></script>
	<script>
		(function($, doc) {
			$.plusReady(function() {
				/*var wvs=plus.webview.all();
				for(var i=0;i<wvs.length;i++){
					alert("webview"+i+": "+wvs[i].getURL());
				}*/
				var sendButton = doc.getElementById('sendMsg');
				var mobileBox = doc.getElementById('mobile');
				var registerButton = doc.getElementById("register");
				var account = doc.getElementById("account");
				var vcode = doc.getElementById("vcode");
				var newpassword = doc.getElementById("newpassword");
				var confirmpassword = doc.getElementById("confirmpassword");
				//这里是发送验证码验证
				sendButton.addEventListener('tap', function() {
					app.getVcode(mobileBox.value, function(err, info) {
						plus.nativeUI.toast(err || info, {
							"verticalAlign": "center"
						});
					});
				}, false);

				function submitForm() {
					var obj = {
						"account": app.strim(account.value),
						"tel": app.strim(mobileBox.value),
						"vcode": app.strim(vcode.value),
						"newPassword": app.strim(newpassword.value),
						"confirmPassword": app.strim(confirmpassword.value)
					}
					var result = app.forgetPassword(obj);
					/*$(".mui-button-row").off("tap", '#register');
					$(".mui-button-row").on("tap", '#register', function() {
						submitForm();
					})*/
		
					if(result) {
						document.getElementById("message").className="none transition";
//						plus.nativeUI.toast("密码设置成功,请重新登陆",{"verticalAlign":"center"});
						plus.webview.close('forget_password');
					}
				}

				//这里是提交忘记密码表单
				$(".mui-button-row").on('tap', '#register', function(event) {
//					$(".mui-button-row").off("tap", '#register');
					submitForm();
				})

				$.back = function(event) {
					var wvs = plus.webview.all();
					var currentView = plus.webview.currentWebview();
					plus.webview.close(currentView);
					return false;
				};
			})
		}(mui, document))
	</script>

</html>